@model VotingSystem.ViewModels.VoteCreateViewModel
@using static EnumHelper

@{
    ViewData["Title"] = "创建投票";
}

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h2 class="card-title text-center mb-4">
                        <i class="fas fa-plus-circle"></i> @ViewData["Title"]
                    </h2>
                    <form asp-action="Create" method="post" id="createVoteForm" enctype="multipart/form-data">
                        <div asp-validation-summary="ModelOnly" class="text-danger"></div>

                        <div class="mb-3">
                            <label asp-for="Title" class="form-label"></label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-heading"></i></span>
                                <input asp-for="Title" class="form-control" placeholder="请输入投票标题" />
                            </div>
                            <span asp-validation-for="Title" class="text-danger"></span>
                        </div>

                        <div class="mb-3">
                            <label asp-for="Description" class="form-label"></label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-align-left"></i></span>
                                <textarea asp-for="Description" class="form-control" rows="3" placeholder="请输入投票描述"></textarea>
                            </div>
                            <span asp-validation-for="Description" class="text-danger"></span>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label asp-for="EndTime" class="form-label">截止时间</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-calendar"></i></span>
                                    <input asp-for="EndTime" class="form-control" type="datetime-local" value="@DateTime.Now.ToString("yyyy-MM-dd")T23:59" />
                                </div>
                                <span asp-validation-for="EndTime" class="text-danger"></span>
                                <small class="form-text text-muted">如果不设置，投票将一直有效</small>
                            </div>
                            <div class="col-md-6">
                                <label asp-for="Type" class="form-label"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-poll"></i></span>
                                    @Html.DropDownListFor(model => model.Type, EnumHelper.GetSelectList<VotingSystem.Models.VoteType>(), new { @class = "form-select", id = "Type" })
                                </div>
                                <span asp-validation-for="Type" class="text-danger"></span>
                            </div>
                        </div>

                        <div class="row mb-3" id="maxVotesPerUserGroup">
                            <div class="col-md-12">
                                <label class="form-label" id="maxVotesLabel">每人最多可选 1 项</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-vote-yea"></i></span>
                                    <input asp-for="MaxVotesPerUser" class="form-control" type="number" min="1" max="10" id="MaxVotesPerUser" />
                                </div>
                                <span asp-validation-for="MaxVotesPerUser" class="text-danger"></span>
                                <div id="multiSelectTip" class="form-text text-info" style="display:none;">每人最多可选 <span id="multiSelectCount">1</span> 项</div>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label asp-for="ResultVisibility" class="form-label"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-eye"></i></span>
                                    @Html.DropDownListFor(model => model.ResultVisibility, EnumHelper.GetSelectList<VotingSystem.Models.ResultVisibility>(), new { @class = "form-select", id = "ResultVisibility" })
                                </div>
                                <span asp-validation-for="ResultVisibility" class="text-danger"></span>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-check form-switch">
                                    <input asp-for="IsPublic" class="form-check-input" type="checkbox" />
                                    <label asp-for="IsPublic" class="form-check-label"></label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check form-switch">
                                    <input asp-for="IsAnonymous" class="form-check-input" type="checkbox" />
                                    <label asp-for="IsAnonymous" class="form-check-label"></label>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-check form-switch">
                                    <input asp-for="RequireLogin" class="form-check-input" type="checkbox" />
                                    <label asp-for="RequireLogin" class="form-check-label"></label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check form-switch">
                                    <input asp-for="AllowModify" class="form-check-input" type="checkbox" />
                                    <label asp-for="AllowModify" class="form-check-label"></label>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-check form-switch">
                                    <input asp-for="ShowResultsAfterEnd" class="form-check-input" type="checkbox" />
                                    <label asp-for="ShowResultsAfterEnd" class="form-check-label"></label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label asp-for="Password" class="form-label"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-key"></i></span>
                                    <input asp-for="Password" class="form-control" placeholder="设置投票密码（可选）" />
                                </div>
                                <span asp-validation-for="Password" class="text-danger"></span>
                            </div>
                        </div>

                        <div class="card mb-3">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="mb-0">投票选项</h5>
                                <button type="button" class="btn btn-sm btn-primary" onclick="addOption()">
                                    <i class="fas fa-plus"></i> 添加选项
                                </button>
                            </div>
                            <div class="card-body">
                                <div id="optionsContainer">
                                    @for (var i = 0; i < Model.Options.Count; i++)
                                    {
                                        <div class="option-item mb-3">
                                            <div class="input-group">
                                                <span class="input-group-text">选项 @(i + 1)</span>
                                                <input asp-for="Options[i].Title" class="form-control" placeholder="请输入选项标题" />
                                                <button type="button" class="btn btn-outline-danger" onclick="removeOption(this)">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            </div>
                                            <div class="mt-2">
                                                <textarea asp-for="Options[i].Description" class="form-control" rows="2" placeholder="选项描述（可选）"></textarea>
                                            </div>
                                            <div class="mt-2">
                                                <label class="form-label">选项图片</label>
                                                <input asp-for="Options[i].Image" class="form-control" type="file" accept="image/*" />
                                                <small class="text-muted">支持 jpg、png、gif 格式，最大 5MB</small>
                                            </div>
                                            <div class="mt-2 row rating-fields">
                                                <div class="col-md-6">
                                                    <input asp-for="Options[i].MaxRating" class="form-control" type="number" min="1" max="10" placeholder="评分范围（1-10）" />
                                                </div>
                                                <div class="col-md-6">
                                                    <input asp-for="Options[i].RatingDescription" class="form-control" placeholder="评分说明" />
                                                </div>
                                            </div>
                                        </div>
                                    }
                                </div>
                            </div>
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> 创建投票
                            </button>
                            <a asp-action="Index" class="btn btn-outline-secondary">
                                <i class="fas fa-arrow-left"></i> 返回列表
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script>
        function addOption() {
            const container = document.getElementById('optionsContainer');
            const optionCount = container.children.length;
            const newOption = document.createElement('div');
            newOption.className = 'option-item mb-3';
            newOption.innerHTML = `
                <div class="input-group">
                    <span class="input-group-text">选项 ${optionCount + 1}</span>
                    <input name="Options[${optionCount}].Title" class="form-control" placeholder="请输入选项标题" required />
                    <button type="button" class="btn btn-outline-danger" onclick="removeOption(this)">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="mt-2">
                    <textarea name="Options[${optionCount}].Description" class="form-control" rows="2" placeholder="选项描述（可选）"></textarea>
                </div>
                <div class="mt-2">
                    <label class="form-label">选项图片</label>
                    <input name="Options[${optionCount}].Image" class="form-control" type="file" accept="image/*" />
                    <small class="text-muted">支持 jpg、png、gif 格式，最大 5MB</small>
                </div>
                <div class="mt-2 row">
                    <div class="col-md-6">
                        <input name="Options[${optionCount}].MaxRating" class="form-control" type="number" min="1" max="10" placeholder="评分范围（1-10）" />
                    </div>
                    <div class="col-md-6">
                        <input name="Options[${optionCount}].RatingDescription" class="form-control" placeholder="评分说明" />
                    </div>
                </div>
            `;
            container.appendChild(newOption);
        }

        function removeOption(button) {
            const container = document.getElementById('optionsContainer');
            if (container.children.length > 2) {
                button.closest('.option-item').remove();
                // 重新编号
                container.querySelectorAll('.option-item').forEach((item, index) => {
                    item.querySelector('.input-group-text').textContent = `选项 ${index + 1}`;
                    item.querySelectorAll('input, textarea').forEach(input => {
                        input.name = input.name.replace(/\[\d+\]/, `[${index}]`);
                    });
                });
            } else {
                alert('至少需要两个选项');
            }
        }

        function toggleOptionFields() {
            var type = $("#Type").val();
            if (type === "Rating") {
                $(".rating-fields").show();
                $("#MaxVotesPerUser").val(1).prop("disabled", true);
                $("#multiSelectTip").hide();
            } else if (type === "Multiple") {
                $(".rating-fields").hide();
                $("#MaxVotesPerUser").prop("disabled", false);
                $("#multiSelectTip").show();
                $("#multiSelectCount").text($("#MaxVotesPerUser").val());
            } else {
                $(".rating-fields").hide();
                $("#MaxVotesPerUser").prop("disabled", false);
                $("#multiSelectTip").hide();
            }
        }

        function updateMaxVotesLabel() {
            var type = $("#Type").val();
            if (type === "Multiple") {
                $("#maxVotesLabel").text("每人最多可选 " + $("#MaxVotesPerUser").val() + " 项");
            } else {
                $("#maxVotesLabel").text("每人只能投 1 项");
            }
        }

        function toggleMaxVotesInput() {
            var type = $("#Type").val();
            if (type === "Multiple") {
                $("#maxVotesPerUserGroup").show();
                $("#multiSelectTip").show();
                $("#MaxVotesPerUser").prop("disabled", false);
            } else {
                $("#maxVotesPerUserGroup").hide();
                $("#multiSelectTip").hide();
                $("#MaxVotesPerUser").val(1);
                $("#MaxVotesPerUser").prop("disabled", true);
            }
            updateMaxVotesLabel();
        }

        $(document).ready(function() {
            toggleMaxVotesInput();
            toggleOptionFields();
            $("#Type").on("change", function() {
                toggleOptionFields();
                toggleMaxVotesInput();
                updateMaxVotesLabel();
            });
            $("#MaxVotesPerUser").on("input", function() {
                if ($("#Type").val() === "Multiple") {
                    $("#multiSelectCount").text($(this).val());
                    updateMaxVotesLabel();
                }
            });
            updateMaxVotesLabel();
        });
    </script>
} 